import { cloneDeep } from 'lodash';
import {
  alignTypeConst,
  echartColorListConst,
  echartPieDataSourceConst,
} from '@/visual/commons/consts/dashboard-const';
import nightingalePieChartCompImg from '@/visual/assets/img/dashboard/nightingale-pie-chart-comp.png';
import { visualComponentConfig, visualComponentGroup } from './base-config';
import CommonUtil from '@/visual/commons/utils/common-util';

const nightingalePieChartCompData = [
  { value: 1200, name: '大米' },
  { value: 1100, name: '小麦' },
  { value: 1000, name: '玉米' },
  { value: 900, name: '小米' },
  { value: 800, name: '红米' },
  { value: 700, name: '黑米' },
  { value: 600, name: '高粱' },
  { value: 500, name: '花生' },
  { value: 400, name: '大豆' },
];

/**
 * 饼图Series
 */
const nightingalePieCompSeriesConfig = {
  name: '',
  radius: [10, 50],
  avoidLabelOverlap: true,
  roseType: true,
  color: cloneDeep(echartColorListConst),
  selectedMode: 'false',
  selectedOffset: 10,
  legendHoverLink: true,
  stillShowZeroSum: true,
  startAngle: 90,
  minAngle: 0,
  minShowLabelAngle: 0,
  zlevel: 0,
  cursor: 'pointer',
  itemStyle: {
    borderRadius: 4,
    borderColor: '#ffffff',
    borderWidth: 2,
    borderType: 'solid',
    shadowBlur: 0,
    shadowColor: 'rgba(0,0,0,0.05)',
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    opacity: 1,
  },
  center: [
    {
      value: 50,
      unit: '%',
    },
    {
      value: 55,
      unit: '%',
    },
  ],
  label: {
    show: true,
    lineHeight: 32,
    width: 150,
    height: 32,
    padding: 0,
    color: '#ffffff',
    backgroundColor: 'transparent',
    fontStyle: 'normal',
    fontWeight: 400,
    fontSize: 14,
    rotate: {
      select: 'false',
      value: '0',
    },
    overflow: 'truncate',
    ellipsis: '...',
    borderColor: 'transparent',
    borderWidth: 1,
    borderType: 'solid',
    borderRadius: 0,
    position: 'outside',
    formatter: '',
  },
  labelLine: {
    show: true,
    showAbove: true,
    length: 30,
    length2: 10,
    smooth: true,
    minTurnAngle: 90,
    maxSurfaceAngle: 0,
    lineStyle: {
      color: '#ffffff',
      width: 1,
      type: 'solid',
      opacity: 1,
    },
  },
  emphasis: {
    scale: true,
    scaleSize: 10,
    focus: 'none',
    blurScope: 'series',
    label: {
      show: true,
      lineHeight: 32,
      width: 150,
      height: 32,
      padding: 0,
      color: '#ffffff',
      backgroundColor: 'transparent',
      fontStyle: 'normal',
      fontWeight: 400,
      fontSize: 14,
      rotate: {
        select: 'false',
        value: '0',
      },
      overflow: 'truncate',
      ellipsis: '...',
      borderColor: 'transparent',
      borderWidth: 1,
      borderType: 'solid',
      borderRadius: 0,
      formatter: '',
    },
    labelLine: {
      show: true,
      showAbove: true,
      length: 30,
      length2: 10,
      smooth: true,
      minTurnAngle: 90,
      maxSurfaceAngle: 0,
      lineStyle: {
        color: '#ffffff',
        width: 1,
        type: 'solid',
        opacity: 1,
      },
    },
  },
  dataSource: {
    type: echartPieDataSourceConst.json,
    data: JSON.stringify(nightingalePieChartCompData),
  },
};

/**
 * 可视化组件配置
 */
const nightingalePieChartCompConfig = {
  key: 'd58rd6e946d7',
  compId: 'hvNightingalePieChart' + CommonUtil.shortUUID(),
  name: 'hvPieChart',
  group: visualComponentGroup.chart.value,
  label: '南丁格尔饼图',
  img: nightingalePieChartCompImg,
  propertyComponent: 'hvPieChartProperty',
  componentStyleGeneratorName: 'hvCommonStyleGenerator',
  ...cloneDeep(visualComponentConfig.options),
  componentDimensions: {
    width: 350,
    height: 350,
  },
  componentProps: {
    title: {
      show: true,
      text: '南丁格尔饼图标题',
      textStyle: {
        fontSize: 14,
        fontWeight: 400,
        color: '#f2f2f2',
      },
      subtext: '',
      subtextStyle: {
        fontSize: 13,
        fontWeight: 400,
        color: '#f2f2f2',
      },
    },
    tooltip: {
      show: false,
      trigger: 'item',
      triggerOn: 'mousemove',
      formatter: "'示例：</br> 名称：'+data.name",
    },
    legend: {
      show: true,
      top: {
        type: alignTypeConst.value,
        value: '30',
      },
      left: {
        type: alignTypeConst.value,
        value: '10',
      },
      right: {
        type: alignTypeConst.value,
        value: '10',
      },
      bottom: {
        type: alignTypeConst.value,
        value: '10',
      },
      color: 'red',
      type: 'scroll',
      zlevel: 0,
      orient: 'horizontal',
      padding: 0,
      textStyle: {
        fontSize: 14,
        fontWeight: 400,
        color: '#f2f2f2',
      },
    },
    series: [cloneDeep(nightingalePieCompSeriesConfig)],
    defaultSeries: nightingalePieCompSeriesConfig,
  },
};

/**
 * 配置
 */
export { nightingalePieChartCompConfig };
